<template>
    <div class="banner">
            <div class="w">
                <div class="logo">
                    <a href=""><img src="../images/dcf9596d4a744228.gif" alt=""></a>
                </div>
                <div class="search">
                    <div class="search-ss">
                        <input type="text" placeholder="111" autofocus>
                        <div class="search-btn">
                            <span>搜索</span>
                         </div>
                         
                        <div class="gw">
                            <span>我的购物车</span>
                        </div>
                    </div>
                    <div class="hotwords">
                            <ol>
                                <li class="hotwords-items" v-for="(hotword, index) in hotwords" :key="index" ><a href="" :style="hotwords[index]=== hotwords[0] ? 'color: #f10215;' : ''">{{hotword.text}}</a></li>
                                
                            </ol>
                    </div>
                    <div class="navitems clear">
                        <ol>
                            <li class="navitems-groups" v-for="(navitem,index) in navitems" :key="index" ><a href="" :style="navitems[index] === navitems[0]||navitems[index] ===navitems[1] ? 'color: #f10215;' : ''">{{navitem.text}}</a></li>
                        </ol>
                    </div>
                </div>
                <div class="banner-r">
                    <a href=""><img src="../images/8d7b45174f92d5db.png.webp" alt=""></a>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    data(){
        return{
            navitems:[
                {text:"秒杀"},
                {text:"优惠卷"},
                {text:"PLUS会员"},
                {text:"品牌闪购"},
                {text:"拍卖"},
                {text:"京东时尚"},
                {text:"京东超市"},
                {text:"京东生鲜"},
                {text:"京东国际"},
                {text:"京东金融"},
            ],
            hotwords:[
                {text: '超市年货节'},
                {text: '5g手机'},
                {text: '健康精选'},
                {text: '每100-200'},
                {text: '海鲜礼盒'},
                {text: '家具家纺'},
                {text: '家电年货'},
                {text: '运动新年'},
                {text: '超市年货'}
            ]
        }
    }
    
}
</script>

<style lang="stylus" scoped>
.banner {
    width: 100%;
    // height 1px
}
.logo {
    float: left;
}
.logo img {
    margin-top: 10px;
    height: 120px;
    width: 190px;
}
.banner-r {
    float: right;
}
.banner-r img {
    margin-top: 10px;
    height: 120px;
    width: 190px;
    /* position: relative;
    top: 0px; */
}
.search{
    width: 800px;
    margin: 0 auto;
    top: 25px;
    position: relative;
    float: left;
}
.search-ss {
    margin: 0 50px;
    float: left;
    border: 1px solid #e1251b;
}
.search-ss input {
    position: relative;
    width: 460px;
    height: 34px;
    outline: none;
    border: none;
}
.search-btn {
    top: 1px;
    float: right;
    width: 75px;
    height: 34px;
    text-align: center;
    background-color: #e1251b;
    border: none;
    cursor: pointer;
}
.search-btn span{
    position: relative;
    top: 5px;
    color: #fff;
}
.gw {
    position: absolute;
    border: 1px solid #eee;
    text-align: center;
    width: 150px;
    height: 30px;
    float: right;
    right: 45px;
    top: 1px;
    
}
.gw span {
    position: relative;
    top: 4px;
    font-size: 14px;
    color: #f10215;
    font-weight: 500;
}
.hotwords {
    position: relative;
    left: 54px;
    top: 8px;
    width: 500px;
}
.hotwords-items {
    font-size: 12px;
    float: left;
    margin-right: 5px;
    color: #999;
    cursor: pointer;
}
.navitems {
    position: relative;
    top: 30px;
    padding-left: 20px;
}
.navitems-groups {
    
    margin: 0 11px;
    float: left;
    font-size: 15px;
    color: #333;
}

</style>